<script setup lang="ts">
import { ref, computed } from 'vue'
import { useScrollbarConfig, type ScrollbarConfig } from '@/composables/useScrollbarConfig'
import { Settings, Palette, RotateCcw, Check } from 'lucide-vue-next'

/**
 * 滚动条配置组件
 * 提供可视化的滚动条样式配置界面
 */

const {
  currentPreset,
  customConfig,
  useCustom,
  currentConfig,
  setPreset,
  setCustomConfig,
  resetToDefault,
  getAvailablePresets,
  SCROLLBAR_PRESETS
} = useScrollbarConfig()

// 控制面板显示状态
const isConfigPanelOpen = ref(false)

// 临时配置（用于实时预览）
const tempConfig = ref<Partial<ScrollbarConfig>>({})

// 预设选项的显示名称
const presetLabels = {
  default: '默认',
  thin: '细线',
  thick: '粗线',
  minimal: '极简'
} as const

/**
 * 切换配置面板显示状态
 */
const toggleConfigPanel = () => {
  isConfigPanelOpen.value = !isConfigPanelOpen.value
  if (isConfigPanelOpen.value) {
    // 打开面板时，初始化临时配置
    tempConfig.value = { ...customConfig.value }
  }
}

/**
 * 应用临时配置
 */
const applyTempConfig = () => {
  setCustomConfig(tempConfig.value)
}

/**
 * 选择预设主题
 */
const selectPreset = (preset: keyof typeof SCROLLBAR_PRESETS) => {
  setPreset(preset)
  tempConfig.value = {}
}

/**
 * 更新临时配置的某个属性
 */
const updateTempConfig = (key: keyof ScrollbarConfig, value: any) => {
  tempConfig.value = {
    ...tempConfig.value,
    [key]: value
  }
  // 实时应用配置以便预览
  applyTempConfig()
}

/**
 * 重置配置
 */
const handleReset = () => {
  resetToDefault()
  tempConfig.value = {}
  isConfigPanelOpen.value = false
}

/**
 * 获取当前配置的预览样式
 */
const previewConfig = computed(() => {
  return {
    ...currentConfig.value,
    ...tempConfig.value
  }
})
</script>

<template>
  <div class="fixed bottom-4 right-4 z-50">
    <!-- 配置按钮 -->
    <button
      @click="toggleConfigPanel"
      class="bg-primary-500 hover:bg-primary-600 dark:bg-cyber-green dark:hover:bg-cyber-green/80 text-white dark:text-black p-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 glow-effect"
      :class="{ 'rotate-45': isConfigPanelOpen }"
    >
      <Settings class="w-5 h-5" />
    </button>

    <!-- 配置面板 -->
    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0 transform translate-y-4 scale-95"
      enter-to-class="opacity-100 transform translate-y-0 scale-100"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100 transform translate-y-0 scale-100"
      leave-to-class="opacity-0 transform translate-y-4 scale-95"
    >
      <div
        v-if="isConfigPanelOpen"
        class="absolute bottom-16 right-0 w-80 bg-white dark:bg-gray-900 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 p-6 backdrop-blur-sm bg-opacity-95 dark:bg-opacity-95"
      >
        <!-- 面板标题 -->
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <Palette class="w-5 h-5" />
            滚动条配置
          </h3>
          <button
            @click="handleReset"
            class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
            title="重置为默认"
          >
            <RotateCcw class="w-4 h-4" />
          </button>
        </div>

        <!-- 预设主题选择 -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            预设主题
          </label>
          <div class="grid grid-cols-2 gap-2">
            <button
              v-for="preset in getAvailablePresets()"
              :key="preset"
              @click="selectPreset(preset)"
              class="p-2 text-sm rounded-md border transition-all duration-200"
              :class="[
                currentPreset === preset && !useCustom
                  ? 'bg-primary-500 text-white border-primary-500 dark:bg-cyber-green dark:text-black dark:border-cyber-green'
                  : 'bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700'
              ]"
            >
              {{ presetLabels[preset] }}
            </button>
          </div>
        </div>

        <!-- 自定义配置 -->
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
              自定义配置
            </label>
            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
              <Check v-if="useCustom" class="w-3 h-3 text-green-500" />
              {{ useCustom ? '已启用' : '使用预设' }}
            </div>
          </div>

          <!-- 宽度配置 -->
          <div>
            <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">
              宽度: {{ previewConfig.width }}px
            </label>
            <input
              type="range"
              min="2"
              max="20"
              :value="previewConfig.width"
              @input="updateTempConfig('width', parseInt(($event.target as HTMLInputElement).value))"
              class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 slider"
            />
          </div>

          <!-- 高度配置 -->
          <div>
            <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">
              滑块最小高度: {{ previewConfig.height }}px
            </label>
            <input
              type="range"
              min="8"
              max="50"
              :value="previewConfig.height"
              @input="updateTempConfig('height', parseInt(($event.target as HTMLInputElement).value))"
              class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 slider"
            />
          </div>

          <!-- 圆角配置 -->
          <div>
            <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">
              圆角: {{ previewConfig.borderRadius }}px
            </label>
            <input
              type="range"
              min="0"
              max="10"
              :value="previewConfig.borderRadius"
              @input="updateTempConfig('borderRadius', parseInt(($event.target as HTMLInputElement).value))"
              class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 slider"
            />
          </div>

          <!-- 颜色配置 -->
          <div class="grid grid-cols-1 gap-3">
            <!-- 轨道颜色 -->
            <div>
              <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                轨道颜色
              </label>
              <div class="flex items-center gap-2">
                <input
                  type="color"
                  :value="previewConfig.trackColor"
                  @input="updateTempConfig('trackColor', ($event.target as HTMLInputElement).value)"
                  class="w-8 h-8 rounded border border-gray-300 dark:border-gray-600 cursor-pointer"
                />
                <input
                  type="text"
                  :value="previewConfig.trackColor"
                  @input="updateTempConfig('trackColor', ($event.target as HTMLInputElement).value)"
                  class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                  placeholder="#ffffff"
                />
              </div>
            </div>

            <!-- 滑块颜色 -->
            <div>
              <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                滑块颜色
              </label>
              <div class="flex items-center gap-2">
                <input
                  type="color"
                  :value="previewConfig.thumbColor"
                  @input="updateTempConfig('thumbColor', ($event.target as HTMLInputElement).value)"
                  class="w-8 h-8 rounded border border-gray-300 dark:border-gray-600 cursor-pointer"
                />
                <input
                  type="text"
                  :value="previewConfig.thumbColor"
                  @input="updateTempConfig('thumbColor', ($event.target as HTMLInputElement).value)"
                  class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                  placeholder="#22c55e"
                />
              </div>
            </div>

            <!-- 悬停颜色 -->
            <div>
              <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                悬停颜色
              </label>
              <div class="flex items-center gap-2">
                <input
                  type="color"
                  :value="previewConfig.thumbHoverColor"
                  @input="updateTempConfig('thumbHoverColor', ($event.target as HTMLInputElement).value)"
                  class="w-8 h-8 rounded border border-gray-300 dark:border-gray-600 cursor-pointer"
                />
                <input
                  type="text"
                  :value="previewConfig.thumbHoverColor"
                  @input="updateTempConfig('thumbHoverColor', ($event.target as HTMLInputElement).value)"
                  class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                  placeholder="#16a34a"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 预览区域 -->
        <div class="mt-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
          <div class="text-xs text-gray-600 dark:text-gray-400 mb-2">预览效果</div>
          <div 
            class="h-20 overflow-y-scroll bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 p-2"
            :style="{
              '--preview-scrollbar-width': previewConfig.width + 'px',
              '--preview-scrollbar-height': previewConfig.height + 'px',
              '--preview-track-color': previewConfig.trackColor,
              '--preview-thumb-color': previewConfig.thumbColor,
              '--preview-thumb-hover-color': previewConfig.thumbHoverColor,
              '--preview-border-radius': previewConfig.borderRadius + 'px'
            }"
          >
            <div class="h-40 text-xs text-gray-500 dark:text-gray-400">
              这是一个预览区域，展示滚动条的样式效果。<br>
              您可以滚动查看配置的滚动条样式。<br>
              <br>
              当前配置：<br>
              宽度: {{ previewConfig.width }}px<br>
              高度: {{ previewConfig.height }}px<br>
              圆角: {{ previewConfig.borderRadius }}px<br>
              轨道: {{ previewConfig.trackColor }}<br>
              滑块: {{ previewConfig.thumbColor }}<br>
              悬停: {{ previewConfig.thumbHoverColor }}
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
/* 滑块样式 */
.slider::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #22c55e;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark .slider::-webkit-slider-thumb {
  background: #00ff88;
  border-color: #1f2937;
}

.slider::-webkit-slider-track {
  height: 8px;
  cursor: pointer;
  background: #e5e7eb;
  border-radius: 4px;
}

.dark .slider::-webkit-slider-track {
  background: #374151;
}

/* 预览区域的滚动条样式 */
.h-20::-webkit-scrollbar {
  width: var(--preview-scrollbar-width);
}

.h-20::-webkit-scrollbar-track {
  background: var(--preview-track-color);
}

.h-20::-webkit-scrollbar-thumb {
  background: var(--preview-thumb-color);
  border-radius: var(--preview-border-radius);
  min-height: var(--preview-scrollbar-height);
}

.h-20::-webkit-scrollbar-thumb:hover {
  background: var(--preview-thumb-hover-color);
}
</style>